<template>
  <div v-loading="loading" class="comment-detail">
    <div class="ctdl-main">
      <div class="simple-info">
        <h3>买家信息</h3>
        <div>
          <div style="min-width:40%;display:flex;align-item:center;">
            <div style="margin-right:5px;">买家：{{ userInfo.name }}</div>
            <router-link :to="{name: 'Chat', query: {to: phone}}"><img style="width:63px;height:20px;cursor:pointer;" :src="require('@/assets/images/icon-btn-callme.png')" class="cursor_pointer" alt></router-link>
          </div>
          <div>用户ID：{{ userInfo.id }}</div>
        </div>
      </div>
      <div class="order-info">
        <h3>订单信息</h3>
        <div>
          <div>
            订单编号：
            <span style="color:#1182FB;font-weight:600;">{{ orderId }}</span>
          </div>
          <table border="0" cellpadding="0" cellspacing="0" align="center">
            <thead>
              <tr>
                <th>商品图片</th>
                <th style="text-align:left;">商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>状态</th>
                <th>商品总价</th>
              </tr>
            </thead>
            <tbody>
              <tr class="content-list-tr">
                <td style="width:130px;">
                  <div class="content-list-img">
                    <el-image
                      style="min-width: 80px;max-width:80px; height: 80px"
                      :src="img"
                      fit="fill"
                    >
                      <div slot="error" class="image-slot">
                        <img style="min-width: 80px;max-width:80px; height: 80px" :src="require('../../assets/images/background-upload-false.png')" alt="">
                      </div>
                    </el-image>
                  </div>
                </td>
                <td style="text-align:left;width:300px;">
                  <div>
                    <div style="width:250px;">{{ goodsName }}</div>
                    <p class="colore4e9ef">规格：{{ specs }}</p>
                  </div>
                </td>
                <td>
                  <div class="font-weight600">{{ price|fixedPrice }}</div>
                </td>
                <td style="width:10%;">
                  <div>{{ number }}</div>
                </td>
                <td>
                  <div>确认收货</div>
                </td>
                <td>
                  <div class="font-weight600">{{ allPrice|fixedPrice }}</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="comment-info">
        <h3>评价信息</h3>
        <div>
          <div>
            <span>用户评价：</span>
            <div>
              <el-rate
                v-model="commentInfo.score"
                disabled
                show-score
                text-color="#ff9900"
                :score-template="commentInfo.score>4?'好评':commentInfo.score>2?'中评':commentInfo.score>=0?'差评':'差评'"
              />
              <div v-show="commentInfo.content.length>0" class="comment-info-content">
                <div v-for="(item,i) in commentInfo.content" :key="i">
                  <span>{{ i===0?"评价内容：":i===1?"店铺回复：":i===2?"追评内容：":"无效评价：" }}</span>
                  <div>
                    <div>{{ item.content }}</div>
                    <div>
                      <el-image
                        v-for="(imgzx,index) in item.image"
                        v-show="i===1?false:true"
                        :key="index"
                        style="width: 60px; height: 60px;margin-right:10px;margin-top:10px;"
                        :src="imgzx"
                        :preview-src-list="item.image"
                      >
                        <div slot="error" class="image-slot">
                          <img style="min-width: 60px;max-width:60px; height: 60px" :src="require('../../assets/images/background-upload-false.png')" alt="">
                        </div>
                      </el-image>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="type==='1'?false:true" style="margin:30px 0 0px 0;">
            <span>回复评价：</span>
            <div>
              <el-input
                v-model="replyComment"
                type="textarea"
                placeholder="回复下评价吧，您的回复对买家印象有一定的帮助"
                maxlength="300"
                show-word-limit
                :autosize="{ minRows: 6, maxRows: 300}"
              />
            </div>
          </div>
          <div style="margin-top:30px;">
            <span />
            <div>
              <el-button v-show="type==='1'?false:true" type="primary" @click="sureAnswer()">回复</el-button>
              <router-link to="/comments/list">
                <el-button>返回</el-button>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppraiseDetails, insert } from '@/api/comments';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      userInfo: { name: '小鹿dew', id: '23523524662' },
      orderId: '5241857178175',
      img:
        'http://47.92.129.93:8090/ECPartyImage/2019111302/49d084d835e848e29469c743c539b767.png',
      goodsName: '专业生产盆式橡胶支座 抗震盆式桥梁支座GPZ(KZ)LQZ球形支座',
      specs: 'D80',
      price: 100.0,
      number: 5,
      state: '等待买家付款',
      allPrice: 500.0,
      commentInfo: {
        score: 5,
        content: []
      },
      replyComment: '',
      type: '0',
      loading: false,
      phone: ''
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  created() {
    const param = sessionStorage.getItem('commentDetailId');
    this.loading = true;
    getAppraiseDetails({ id: param }).then(res => {
      const ass = res.data.assess;
      this.userInfo.name = ass.nickName;
      this.userInfo.id = ass.userId;
      this.orderId = ass.ordershopId;
      this.img = this.qnPath(ass.mdseImg);
      this.goodsName = ass.mdseName;
      this.commentInfo.score = parseFloat(ass.starLevel);
      this.price = ass.unitPrice;
      this.number = ass.buyNum;
      this.allPrice = ass.unitPrice * ass.buyNum;
      this.commentInfo.content = res.data.assessDetails;
      this.type = ass.type;
      const userComment = {
        image: ass.image,
        content: ass.introduce
      };
      this.phone = ass.phone;
      this.commentInfo.content.unshift(userComment);
      for (let i = 0; i < this.commentInfo.content.length; i++) {
        if (this.commentInfo.content[i]) {
          if (this.commentInfo.content[i].image) {
            this.commentInfo.content[i].image = this.commentInfo.content[
              i
            ].image.split(',');
            for (let item of this.commentInfo.content[i].image) {
              item = this.qnPath(item);
            }
          }
        }
      }
      this.loading = false;
    });
  },
  methods: {
    sureAnswer() {
      // {"userId":"店铺id","content":"回复内容","assessId":"评价id"}
      this.loading = true;
      const param = {
        userId: this.shopInfo.id,
        content: this.replyComment,
        id: sessionStorage.getItem('commentDetailId')
      };
      insert(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('回复成功');
          this.loading = false;
          this.$router.push('/comments/list');
        } else {
          this.loading = false;
          this.$message.error('回复失败');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.comment-detail {
  $bordercolor: #e9e9e9;
  width: 100%;
  font-size: 14px;
  background: #f1f5f9;
  color: #3c4353;
  margin-bottom: 10px;
  .ctdl-main {
    padding: 0 11%;
    background-color: #fff;
    margin-bottom: 20px;
    & > div {
      padding-bottom: 30px;
      padding-left: 50px;
      border-bottom: 1px solid #e4e9ef;
      h3 {
        margin: 0;
        padding-top: 30px;
        padding-bottom: 20px;
        text-indent: 11px;
        background: url("../../assets/images/iconbg-nav.png") no-repeat 0 32px;
        background-size: 5px 12px;
        font-size: 14px;
      }
      & > div {
        margin-bottom: 20px;
        font-weight: 400;
        text-align: left;
        text-indent: 11px;
        padding: 10px 5% 0 2%;
      }
    }
  }
  .simple-info {
    & > div {
      display: flex;
    }
  }
  .order-info {
    table {
      font-size: 14px;
      background: #fff;
      width: 100%;
      padding: 20px 2% 0 0;
      text-indent: 0;
      line-height: 22px;
      thead {
        background: #f9fbfc;
        text-align: center;
        th {
          height: 50px;
          font-weight: 600;
          border-top: 1px solid #e4e9ef;
          border-bottom: 1px solid #e4e9ef;
          &:first-child {
            text-align: left;
            text-indent: 20px;
            border-left: 1px solid #e4e9ef;
          }
          &:last-child {
            border-right: 1px solid #e4e9ef;
          }
        }
      }
      tbody {
        td {
          border-left: 1px solid #e4e9ef;
          border-bottom: 1px solid #e4e9ef;
          padding: 20px 0 20px 0;
          text-align: center;
          min-height: 120px;
          & > div {
            min-height: 80px;
          }
          &:first-child {
            padding-left: 20px;
            text-align: left;
          }
          &:last-child {
            border-right: 1px solid #e4e9ef;
          }
          &:nth-child(2) {
            border-left: none;
          }
          .content-list-img {
            display: flex;
            flex-flow: row nowrap;
            & > div {
              display: flex;
              flex-flow: row nowrap;
            }
          }
        }
      }
    }
  }
  .comment-info {
    & > div {
      & > div {
        width: 100%;
        display: flex;
        text-indent: 0;
        padding-right: 10%;
        span {
          display: inline-block;
          width: 70px;
          text-align: right;
        }
        div {
          flex: 1;
        }
        /deep/.el-input {
          width: 100%;
        }
        .el-button {
          width: 100px;
          height: 36px;
          padding: 0;
          line-height: 36px;
        }
        .comment-info-content {
          background-color: #f6f8f9;
          margin-top: 30px;
          padding-right: 20px;
          position: relative;
          & > div {
            padding: 20px;
            border-bottom: 1px solid #e4e9ef;
            display: flex;
            &:last-child {
              border-bottom: none;
            }
          }
        }
        .comment-info-content::before {
          content: "";
          width: 0px;
          height: 0;
          left: 40px;
          top: -20px;
          position: absolute;
          border-color: #ffffff;
          border-width: 10px;
          border-style: solid;
          border-bottom-color: #f6f8f9;
        }
      }
    }
  }
}
.colore4e9ef {
  color: #838a9d;
  margin-top: 5px;
}
.font-weight600 {
  font-weight: 600;
}
.cursor_pointer {
  cursor: pointer;
}
/deep/.el-rate__text {
  color: #3c4353 !important;
}
</style>
